<template>
  <el-row :gutter="20">
    <el-col :span="6" v-for="item in cards" :key="item.id">
      <el-card shadow="always">
        <template #header>
          <div class="card-header">
            <span>{{ item.title }}</span>
            <i class="card-header-icon" :class="item.icon"></i>
          </div>
        </template>
        <div class="text item">100+</div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
const { proxy } = getCurrentInstance()
let cards = ref([])
onMounted(() => {
  proxy.$axios.get('/').then(function (data) {
    cards.value = [
      {
        id: '1',
        title: '用户数量',
        content: '100+',
        icon: 'el-icon-user'
      },
      {
        id: '2',
        title: '订单数量',
        content: '100+',
        icon: 'el-icon-tickets'
      },
      {
        id: '3',
        title: '销售额',
        content: '100+',
        icon: 'el-icon-goods'
      },
      {
        id: '4',
        title: '利润',
        content: '100+',
        icon: 'el-icon-tickets'
      }
    ]
  })
})
</script>

<style lang='less' scoped>
@font-face {
  font-family: Nunito;
  src: url('../../assets/font/Nunito-Regular.woff');
}
.text {
  font-family: Nunito;
  color: #6c757d;
  font-size: 2rem;
  font-weight: 600;
}
.item {
  margin-bottom: 6px;
}
.card-header {
  .card-header-icon {
    float: right;
    margin-top: -3px;
    font-size: 28px;
    color: #cdcdcd;
  }
}
.el-card__header,
.el-card__body {
  padding: 14px 16px !important;
}
</style>
